<template>
<!-- 首页底栏 -->
  <div class="background row haha">
    <div class="conner">
      <div class="container-fluid">
        <div class="row">
          <div class="col service">
            <dl class="clearfix1">
              <dt>课程体系</dt>
              <dd>乐高创意启蒙</dd>
              <dd>Scratch儿童积木式编程</dd>
              <dd>Scratch机器人启蒙课程</dd>
              <dd>Micro:bit机器人基础编程</dd>
              <dd>Arduino开源硬件编程</dd>
              <dd>Python智能机器人编程</dd>
              <dd>ROS智能机器人操作系统</dd>
              <dd>Python人工智能编程</dd>
              <dd>新工科专业类大学先修课</dd>
              <dd>STEAM创新课程</dd>
              <dd>创造自己的ROBOT</dd>
            </dl>
            <dl class="clearfix1">
              <dt>了解我们</dt>
              <dd>品牌故事</dd>
              <dd>企业简介</dd>
              <dd>发展进程</dd>
              <dd>哈工动态</dd>
            </dl>
            <dl class="clearfix1">
              <dt>课程服务</dt>
              <dd >在线学习</dd>
              <dd>
                <router-link class="litter gi"  :to="{name: 'Campus'}">走进校园</router-link>
                </dd>
              <dd>
                <router-link class="litter gi"  :to="{name: 'loginCourse'}">科教基地</router-link>
                </dd>
              <dd>假期研学</dd>
              <dd>赛事活动</dd>
            </dl>
            <dl class="clearfix1">
              <dt>预约试听</dt>
              <dd>99元在线软件课程n节</dd>
              <dd>N元硬件课程包</dd>
            </dl>
            <dl class="clearf">
              <dt>联系我们</dt>
              <span style="background-image: url('http://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/333.png')"></span>
            </dl>
            <dl class="clear">
              <dd>
                <strong>
                  <img src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/icon_site.png" alt class="address">
                </strong>
                北京市上奥世纪中心A座
              </dd>
              <dd>
                <strong>
                  <img src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/icon_phone.png" alt>
                </strong>
                010-8648-3029
              </dd>
              <dd>
                <strong>
                  <img src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/icon_fax.png" alt class="phone">
                </strong>
                010-8648-3029
              </dd>
              <dd>
                <strong>
                  <img src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/icon_email.png" alt class="mail">
                </strong>
                info@hterobot.com
              </dd>
            </dl>
          </div>
        </div>
        <div class="row">
          <div class="bg">
            <a >首页</a>
          </div>
        </div>
        <div class="row">
          <div class="copyright">
            <ul class="feig">
              <li>
                <img src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/1.png" alt>
              </li>
              <li>
                <img src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/2.png" alt>
              </li>
              <li>
                <img src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/3.png" alt>
              </li>
              <li>
                <img src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/4.png" alt>
              </li>
              <li>
                <img src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/5.png" alt>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  name : "footers",
  mounted(){
     $(".bg").click(function() {
      scrollTo(0, 0);
     })
  }
}
</script>
<style scoped>
.litter{
  color:#b3b3b3;
}
.background {
  height: 641px;
  min-width: 1200px;
  background-color: #252525;
}

.service {
  width: 1200px;
  height: 236px;
  margin-top: 116px;
  margin-left: auto;
  margin-right: auto;
}

.clearfix1 {
  width: 145px;
  margin-right: 64px;
  float: left;
}

.clearfix1 dt {
  font-family: MicrosoftYaHei;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  color: #b3b3b3;
  text-align: center;
  margin-bottom: 43px;
}

.clearfix1 dd {
  font-family: SimSun;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  color: #b3b3b3;
  text-align: center;
  margin-bottom: 12px;
  cursor: pointer;
}
.clearfix1 dd:hover {
  color: #ffffff;
}

.clearf {
  width: 132px;
  float: left;
  margin-right: 38px;
}

.clear strong {
  margin-right: 10px;
}

.clearf dt {
  font-family: MicrosoftYaHei;
  font-size: 16px;
  text-align: center;
  font-weight: normal;
  font-stretch: normal;
  color: #ffffff;
  margin-bottom: 22px;
}

.clearf span {
  display: block;
  width: 93px;
  height: 93px;
  background: skyblue;
  margin: auto;
}
.clear {
  margin-top: 5px;
}

.clear dd {
  font-family: MicrosoftYaHei;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  color: #ffffff;
  margin-bottom: 17px;
}

.bg {
  margin-left: auto;
  margin-right: auto;
  margin-top: 119px;
  width: 139px;
  height: 40px;
  background-color: #0085fe;
  text-align: center;
  line-height: 40px;
  font-family: SimSun;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  border-width: 134px;
  border-top-left-radius: 55px;
  border-top-right-radius: 56px;
  border-bottom-left-radius: 56px;
  border-bottom-right-radius: 56px;
  cursor: pointer;
}
.bg a {
  color: #ffffff;
}

.copyright {
  width: 381px;
  height: 85px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid #3b3b3b;
  margin-top: 44px;
}

.feig {
  list-style-type: none;
  line-height: 85px;
}
.feig li {
  display: inline-block;
  margin: 0 26px;
}
.clear dd .address {
  margin-right: 5px;
}
.clear dd .phone {
  margin-right: 3px;
}
.clear dd .mail {
  margin-right: 2px;
}
.conner {
  width: 1200px;
  margin: 0 auto;
}
.gi:hover{
  color: #fff;
}
</style>
